<div v-cloak id="app" class="main-content">
    <one-table
        :option="option"
        :data="data"
        :loading="loading"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    >
        <!-- 工具菜单 -->
        <template slot="menuLeft">
            <el-button type="primary" size="mini" @click="handleAdd">
                添加
            </el-button>
            <el-button type="primary" size="mini" @click="handleExport">
                导出可用兑换码
            </el-button>
            <el-button type="primary" size="mini" @click="handleCount">
                统计
            </el-button>
            <el-button type="danger" size="mini" @click="handleDelete">
                一键删除
            </el-button>
        </template>
        <template slot="menuRight">
            <el-input
                type="text"
                v-model="form.keyword"
                placeholder="绑定用户ID"
                style="width: 240px; margin-right: 5px"
            ></el-input>
            <el-select
                v-model="form.status"
                placeholder="请选择兑换码状态"
                @change="selectChange"
                @clear="selectClear"
                clearable
            >
                <el-option
                    v-for="item in selectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <el-button type="primary" @click="getData">筛选</el-button>
        </template>
        <!-- 自定义列 -->
        <template slot="status" slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.status == 1">已使用</el-tag>
            <el-tag v-if="scope.row.status == 0">未使用</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 5">已过期</el-tag>
        </template>
        <template slot="user_id" slot-scope="scope">
            <div v-if="scope.row.user_id > 0">
                <p>用户名：{{scope.row.userinfo.nick}}</p>
                <p>用户ID：{{scope.row.userinfo.id}}</p>
                <p>
                    标识：{{scope.row.userinfo.mobile ||
                    scope.row.userinfo.wxmp_openid}}
                </p>
            </div>
            <div v-if="scope.row.user_id == 0">
                <p>多用户</p>
            </div>
        </template>
        <template slot="belong_group" slot-scope="scope">
            <span>{{scope.row.belong_group.name}}</span>
        </template>
        <template slot="code_type" slot-scope="scope">
            <el-tag v-if="scope.row.code_type == 1">一次性</el-tag>
            <el-tag type="danger" v-if="scope.row.code_type == 2"
                >可复用</el-tag
            >
        </template>
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="删除不能恢复,确定删除吗？"
                @confirm="handleDel(scope.row, scope.index)"
            >
                <el-button
                    :disabled="scope.row.system"
                    slot="reference"
                    size="mini"
                    class="_tool"
                    type="danger"
                >
                    <i class="el-icon-delete"></i>
                </el-button>
            </el-popconfirm>
        </template>
    </one-table>
</div>
{include file='common@components/one-table'}
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                loading: false,
                loadingModel: null,
                data: [],
                selectOptions: [
                    {
                        value: "0",
                        label: "未使用",
                    },
                    {
                        value: "1",
                        label: "已使用",
                    },
                    {
                        value: "5",
                        label: "已过期",
                    },
                ],
                form: {
                    status: "",
                    keyword: "",
                },
                option: {
                    index: false,
                    header: true,
                    selection: false,

                    operates: { width: 100 },
                    page: {},
                    size: "mini",
                    column: [
                        {
                            label: "ID",
                            prop: "id",
                            width: 80,
                        },
                        {
                            label: "密匙",
                            prop: "codekey",
                        },
                        {
                            label: "对应会员组",
                            prop: "belong_group",
                            slot: true,
                        },
                        {
                            label: "绑定用户",
                            prop: "user_id",
                            slot: true,
                        },
                        {
                            label: "状态",
                            prop: "status",
                            slot: true,
                        },
                        {
                            label: "类型",
                            prop: "code_type",
                            slot: true,
                        },
                        {
                            label: "可用次数",
                            prop: "use_num",
                            width: 80,
                        },
                        {
                            label: "已用次数",
                            prop: "used_num",
                            width: 80,
                        },
                        {
                            label: "有效期",
                            prop: "ExpTimeText",
                            width: 160,
                        },
                        {
                            label: "创建时间",
                            prop: "create_time",
                            width: 160,
                        },
                        {
                            label: "使用时间",
                            prop: "update_time",
                            width: 160,
                        },
                    ],
                },
            }
        },

        created() {
            this.getData()
        },
        methods: {
            // 获取数据
            getData() {
                let _this = this
                _this.loading = true
                let postData = cloneDeep(_this.form)
                request({
                    params: {
                        s: "codekey/index/index",
                        page: _this.option.page.currentPage,
                        limit: _this.option.page.pageSize,
                    },
                    data: postData,
                    method: "post",
                }).then((e) => {
                    _this.loading = false
                    _this.data = e.data.data.list
                    _this.option.page.total = e.data.data.count
                })
            },
            //分页
            handleCurrentChange(currentPage) {
                let _this = this
                _this.option.page.currentPage = currentPage
                _this.getData()
            },
            //每页显示数
            handleSizeChange(val) {
                let _this = this
                _this.option.page.pageSize = val
                _this.getData()
            },
            //改变状态
            changeSwitch(row) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: "codekey/index/status/",
                        id: row.id,
                        val: row.status,
                    },
                    method: "post",
                }).then((e) => {
                    _this.loading = false
                })
            },

            //删除行
            handleDel(row, index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: "codekey/index/del/",
                        id: row.id,
                    },
                    method: "post",
                }).then((e) => {
                    _this.data.splice(index, 1)
                    _this.loading = false
                })
            },
            //添加
            handleAdd() {
                let _this = this
                navigateTo({
                    s: "codekey/index/createCodekey",
                })
            },
            //编辑
            handleEdit(row, index) {
                let _this = this
                navigateTo({
                    s: "codekey/index/createCodekey",
                    id: row.id,
                })
            },
            // 导出
            handleExport(row, index) {
                let _this = this
                _this.showLoading()
                axios({
                    method: "get",
                    url: common.defaults.baseURL + "?s=codekey/index/export",
                    responseType: "blob",
                })
                    .then((res) => {
                        _this.closeLoading()
                        // 文件下载
                        const blob = new Blob([res.data], {
                            type: "application/vnd.ms-excel",
                        })
                        let link = document.createElement("a")
                        link.href = URL.createObjectURL(blob)
                        link.setAttribute("download", "兑换码.xlsx")
                        link.click()
                        link = null
                    })
                    .catch((err) => {})
            },
            selectChange(e) {
                this.form.status = e
            },
            selectClear() {
                this.form.status = ""
            },
            handleCount() {
                let _this = this
                _this.showLoading()
                request({
                    params: {
                        s: "codekey/index/countNum/",
                    },
                    method: "post",
                }).then((e) => {
                    _this.closeLoading()
                    const h = _this.$createElement
                    _this.$msgbox({
                        title: "兑换码统计信息",
                        message: h("p", null, [
                            h(
                                "p",
                                {
                                    style: "color: green;font-weight: 700",
                                },
                                "兑换码共计：" + e.data.data.count + "个"
                            ),
                            h(
                                "p",
                                { style: "color: green" },
                                "已激活：" + e.data.data.used + "个"
                            ),
                            h(
                                "p",
                                { style: "color: red" },
                                "未激活：" + e.data.data.unuse + "个"
                            ),
                            h("p", "----------------"),
                            h("p", "已激活详情："),
                            h("p", e.data.data.group.used),
                            h("p", "未激活详情："),
                            h("p", e.data.data.group.nused),
                        ]),
                        showCancelButton: false,
                        closeOnClickModal: false,
                        confirmButtonText: "确定",
                    })
                })
            },
            handleDelete() {
                let _this = this
                if (_this.form.status == "") {
                    this.$message.error("请在右边选择要删除的兑换码状态")
                    return false
                }
                _this
                    .$confirm(
                        "此操作将删除所有满足条件的兑换码，是否继续？",
                        "提示",
                        {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }
                    )
                    .then(() => {
                        _this.showLoading()
                        request({
                            params: {
                                s: "codekey/index/deleteAll/",
                                status: _this.form.status,
                            },
                            method: "post",
                        })
                            .then((e) => {
                                _this.closeLoading()
                                _this.form.status = ""
                                _this.getData()
                                _this.$message({
                                    message: "删除成功",
                                    type: "success",
                                })
                            })
                            .catch((v) => {
                                _this.form.status = ""
                                _this.closeLoading()
                                _this.$message.error("请求失败")
                            })
                    })
            },
            showLoading() {
                this.loadingModel = this.$loading({
                    lock: true,
                    text: "loading....",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                })
            },
            closeLoading() {
                this.loadingModel.close()
            },
        },
    })
</script>
